<script setup>
  import { ref, computed, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { useCartStore, useUserStore } from '@/stores'
  import PageHeader from "@/components/PageHeader.vue";
  import {DeleteOutlined, MinusOutlined, PlusOutlined} from "@ant-design/icons-vue";
  import {cartDelGoodsApi, editCartGoodsApi} from "@/api/index.js";
  import {message} from "ant-design-vue";
  const router = useRouter()
  // 购物车列表
  const cartList = computed(() => useCartStore().cartList);
  // 购物车数量
  const cartNum = computed(() => useCartStore().cartNum);
  // 实付款
  const payment = computed(() => useCartStore().payment);
  // 积分抵扣金额
  const discount = computed(() => useCartStore().discount);
  // 总金额
  const total_price = computed(() => useCartStore().total_price);
  // 选中的商品信息
  const selectedInfo = computed(() => useCartStore().selectedInfo);
  // 选中的商品状态
  const tapCheck = (index, gIndex) => {
    const { toggleGoodsStatus } = useCartStore()
    toggleGoodsStatus(index, gIndex)
  }
  // 商品数量改变
  const changeNum = (index, gIndex, type) => {
    const { getCartList } = useCartStore();
    const { sku, num } = cartList.value[index].goods[gIndex]
    let goodsNum
    if(type === 'add') goodsNum = num + 1
    else goodsNum = num - 1
    editCartGoodsApi({sku, num: goodsNum }).then((res) => {
      getCartList()
    })
  }
  // 删除商品
  const delGoods = (sku) => {
    const { getCartList } = useCartStore();
    cartDelGoodsApi({sku}).then(res => {
      getCartList()
    })
  }
  // 下单
  const goCreateOrder = () => {
    const { selectedInfo } = useCartStore()
    if (selectedInfo.createOrder.length) router.push({ name: 'confirmOrder' })
    else message.error('请选择需要下单的商品')
  }
  onMounted(() =>{
    const { token } = useUserStore()
    const { getCartList } = useCartStore();
    if (token) getCartList()
  })

</script>

<template>
  <div class="cart-page">
    <PageHeader> </PageHeader>
    <div class="page-main">
      <div class="cart-main">
        <div class="cart-title">
          <div class="title"> 购物数量（{{ cartNum }}） </div>
          <div class="all-in"> 已选（{{ selectedInfo.num }}） </div>
        </div>
        <div class="cart-list" v-if="cartList.length">
          <div class="cart-shop" v-for="(item, index) in cartList" :key="item.id">
            <div class="shop-title">
              <img :src="item?.img" alt="" class="shop-img">
              <div class="shop-name"> {{ item.name }} </div>
            </div>
            <div class="good-list">
              <div class="goods-item" v-for="(goods, gIndex) in item?.goods" :key="goods.sku">
                <i
                  class="check"
                  :class="goods.checked?'fa-solid fa-circle-check':'fa-regular fa-circle'"
                  @click="tapCheck(index, gIndex)"
                ></i>
                <div class="box">
                  <img :src="goods?.thumb_url" alt="" class="goods-img"/>
                  <div class="goods-info">
                    <div class="goods-name"> {{ goods.goods_name }} </div>
                    <div class="goods-spec ellipsis"> 规格： {{ goods?.spece_value_title?goods?.spece_value_title:'默认规格' }} </div>
                    <div class="actions">
                      <DeleteOutlined @click="delGoods(goods?.sku)"/>
                    </div>
                  </div>
                </div>
                <div class="box mt">
                  <a-input-number :value="goods?.num" :bordered="false" :min="1" :controls="false" decimalSeparator="0">
                    <template #addonBefore>
                      <a-button @click="changeNum(index, gIndex, 'min')" :disabled="goods?.num===1">
                        <MinusOutlined/>
                      </a-button>
                    </template>
                    <template #addonAfter>
                      <a-button @click="changeNum(index, gIndex, 'add')">
                        <PlusOutlined/>
                      </a-button>
                    </template>
                  </a-input-number>
                  <div class="goods-price">
                    <div class="new-price fh">  {{ goods.price }} </div>
                    <div class="old-price fh">  {{ goods.original_price }} </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <a-empty description="购物车暂时没有商品~" v-else/>
      </div>
      <div class="selected-box">
        <a-affix :offset-top="90">
          <a-card>
            <div class="cart-submit">
              <div class="cart-title"> 选中的商品信息 </div>
              <div class="goods-box">
                <div class="goods" v-for="item in selectedInfo.goods" :key="item.id">
                  <div class="goods-name"> {{ item.goods_name }} </div>
                  <div class="goods-price"> {{ item.price }} </div>
                  <div class="goods-num"> x{{ item.num }} </div>
                </div>
              </div>
              <div class="price-num">
                <div class="total-price"> 商品总价：{{ total_price }} </div>
                <div class="total-num"> x{{ selectedInfo.num }} </div>
              </div>
              <div class="points">
                <div class="label"> 积分抵扣金额</div>
                <div class="min-price fh"> - {{  discount  }} </div>
              </div>
              <div class="payment">
                <div class="label"> 实付款 </div>
                <div class="p-value fh"> {{ payment }} </div>
              </div>
              <a-button type="primary" style="background: var(--primary)" @click="goCreateOrder"> 立即下单 </a-button>
            </div>
          </a-card>
        </a-affix>
      </div>
      <div class="footer-btn">
        <div class="payment fh"> 付款金额：{{ payment }} </div>
        <a-button type="primary" size="small" @click="goCreateOrder"> 立即下单 </a-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .cart-page {
    padding: 40px 0;
    position: relative;
    .page-main {
      display: flex;
      gap: 50px;
      .cart-main {
        flex: 1;
        .cart-title {
          display: flex;
          justify-content: space-between;
          max-width: 750px;
          margin-bottom: 20px;
          .all-in {
            color: #999;
            cursor: pointer;
          }
        }
        .cart-list {
          display: flex;
          flex-direction: column;
          gap: 20px;
          .cart-shop {
            .shop-title {
              gap: 10px;
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              .shop-img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                object-fit: cover;
              }
              .shop-name {
                font-size: 18px;
                font-weight: bold;
              }
            }
            .good-list {
              gap: 10px;
              display: flex;
              flex-direction: column;
              .goods-item {
                gap: 20px;
                display: flex;
                align-items: start;
                padding-left: 30px;
                position: relative;
                .check {
                  cursor: pointer;
                  font-size: 16px;
                  color: var(--primary);
                  position: absolute;
                  top: 50%;
                  left: 0;
                  transform: translateY(-50%);
                }
                .box {
                  display: flex;
                  align-items: start;
                  gap: 20px;
                }
                .goods-img {
                  width: 100px;
                  height: 130px;
                  border-radius: 10px;
                }
                .goods-info {
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  gap: 5px;
                  .ellipsis {
                    max-width: 100%;
                    //max-width: 470px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    //white-space: nowrap;
                    word-break: break-all;
                  }
                  .goods-name {
                    max-width: 470px;
                    font-size: 16px;
                    font-weight: bold;
                  }
                  .goods-spec, .shop-name {
                    color: #999;
                  }
                  .actions {
                    margin-top: 10px;
                    .anticon {
                      color: #999;
                      font-size: 20px;
                      cursor: pointer;
                      margin-right: 10px;
                      &:hover {
                        color: var(--primary);
                      }
                    }
                  }
                }
                :deep(.ant-input-number) {
                  width: 40px;
                }
                :deep(.ant-input-number-group-addon) {
                  background-color: transparent;
                  border: none;
                  padding: 0;
                }
                :deep(.ant-input-number-input) {
                  text-align: center !important;
                }
                .ant-btn {
                  width: 32px;
                  height: 32px;
                  padding: 0;
                  color: #999;
                  border: none;
                  border-radius: 10px;
                  background-color: #f1f1f5;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  &:hover {
                    background-color: #e8e8f0;
                  }
                  .anticon {
                    color: #242424;
                    font-size: 16px;
                  }
                }
                .goods-price {
                  color: #999;
                  font-size: 14px;
                  font-weight: bold;
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  .new-price, .old-price {
                    white-space: nowrap;
                  }
                  .new-price {
                    color: #f44;
                    font-size: 18px;
                  }
                  .old-price {
                    text-decoration: line-through;
                  }
                }
              }

              @media (max-width: 750px) {
                .goods-item {
                  display: block;
                }
                .mt {
                  margin-top: 20px;
                  justify-content: space-between;
                }
                .goods-name, .ellipsis {
                  max-width: 100%;
                }
              }
            }
          }
        }
      }
      .selected-box {
        position: sticky;
        right: 20px;
        bottom: 20px;
        width: 400px;
        height: 400px;
        .cart-submit {
          display: flex;
          flex-direction: column;
          gap: 10px;
          .price-num, .points, .payment {
            gap: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .label {
              flex: 1;
            }
            .value {
              color: #999;
              font-size: 12px;
              cursor: pointer;
              &:hover {
                color: var(--primary);
              }
            }
            .min-price {
              color: #f44;
            }
          }
          .goods-box {
            padding: 10px 0;
            border: 1px solid #eee;
            border-left: none;
            border-right: none;
            gap: 10px;
            display: flex;
            flex-direction: column;
            .goods {
              gap: 10px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .goods-name {
                flex: 1;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .goods-price, .goods-num {
                color: #999;
              }
            }
          }
          .payment {
            color: #f44;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
          }
        }
      }
      .footer-btn {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 44px;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        padding: 8px 12px;
        .payment {
          height: 16px;
          color: #f44;
          font-size: 16px;
          font-weight: bold;
          line-height: 16px;
        }
        .ant-btn {
          background: var(--primary);
        }
      }
    }
  }

  @media (max-width: 750px) {
    .selected-box {
      display: none;
    }
    .footer-btn {
      display: flex !important;
    }
  }
</style>